<template>
  <div>
    <el-dialog :title="title" :visible.sync="Formshow" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="设备编码" prop="deviceId">
          <el-input v-model="form.deviceId" placeholder="请输入设备编码" :disabled="Xshow" />
        </el-form-item>
   
      <el-form-item label="所属项目"  prop="deptName">
          <el-cascader v-model="form.deptName" :options="projectList" @change="ProjectChange"
            :show-all-levels="false"
            
            :placeholder="deptText"
            ></el-cascader>
        </el-form-item>


        <el-form-item label="设备名称" prop="deviceName">
          <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="form.longitude" placeholder="请输入精度" v-click="Mapclick" />
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="form.latitude" placeholder="请输入纬度" v-click="Mapclick" />
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary"  @click="submitForm">
                        确定
  </el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="Mapshow">

<Map style="z-index: 999;"></Map>

</el-dialog>
  </div>
</template>

<script>
import { listDevice, getDevice, delDevice, addDevice, updateDevice, deptTreeSelect } from "@/api/system/device";
import EventBus from '../../../utils/map/click';
import Map from './map.vue'
export default {
    directives: {
    click: {
      bind(el, binding) {
        el.addEventListener('click', binding.value);
      },
      unbind(el, binding) {
        el.removeEventListener('click', binding.value);
      }
    }
  },
    components:{
        Map
    },
  props: {
    projectList:{
        type:Array,
        default:()=>[]
    },
    Formshow: {
      type:Boolean,
      default: null
    },
    title:{
        type:String,
        default:""
    },
    Xshow:{
        type:Boolean,
        default:null,
    },
    Rowdata:{
        type:Object,
        default:()=>{}
    },
    operateTitle:{
        type:String,
        default:""
    }
  },
  created(){
    EventBus.$on('JWD', (data) => {
      this.form.longitude = data.J
      this.form.latitude = data.W
    })
  },
  mounted(){
   this.projectList.forEach((node)=>{
        this.ProjectList.push(this.transformNode(node))
       
   })

  },
  watch:{
    title(newTitle){
        if(newTitle=='修改设备'){
           const id = this.Rowdata.id
           getDevice(id).then(res=>{
          this.form=res.data
          this.deptText=this.form.deptName
           })
          
        }
    }
  },
  data() {
    return {
        deptText:"",
        form: {
        deviceId: "",
        deptId: '',
        deptName: '',
        longitude: '',
        latitude: "",
      },
      Mapshow: false,
      ProjectList:[]
     
    };
  },
  methods: {
    submitForm(){
         if(this.title=='添加设备'){
            const deptName = this.findDepartment(this.projectList, this.form.deptId);
        this.form.deptName = deptName;
          (this.form)
        addDevice(this.form).then(res=>{
            this.open=false,
            this.$model.msgSuccess('新增成功')
            this.reset()
        })
         }else{

         }
    },    
    ProjectChange(e) {
        (e)
      this.form.deptId = e[e.length - 1]
    },
    transformNode(node) {
      const { id, label, children } = node;
      const newNode = { value: id, label };
      if (children && children.length > 0) {
        newNode.children = children.map(this.transformNode);
      }

      return newNode;
    },
    findDepartment(data, deptId) {
      for (let item of data) {
        if (item.value == deptId) {
          return item.label;
        } else if (item.children) {
          const result =this.findDepartment(item.children, deptId);
          if (result) {
            return result;
          }
        }
      }
      return null;
    },
    reset() {
      this.form = {
        id: null,
        deviceId: null,
        deptName: null,
        deptId: null,
        deviceName: null,
        longitude: null,
        latitude: null,
        offlineTime: null,
        createTime: null,
        createUserId: null
      };
    
      this.resetForm("form", "factorForm");
    },
    Mapclick(){
        this.Mapshow = !this.Mapshow;
    },
    // operateTitleFunction(){
    //       (this.operateTitle)
    // },
    cancel() {
      // 取消按钮的操作，可以重置表单数据等
      this.Formshow = false; // 隐藏对话框
      this.reset()
    }
    // 其他方法和逻辑
  },
  beforeDestroy() {
  this.$watch(); // 取消观察所有属性
}
};
</script>

<style>

</style>